<template>
  <div class="body">
    <div class="table_content">
      <div class="table_filtrate">
        <div class="tf_item">
          <div class="tag">时间范围</div>
          <el-date-picker
            v-model="tableParams.time_interval"
            class="input"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            size="mini"
          />
        </div>
        <div class="tf_item">
          <div class="tag">手机号</div>
          <el-input
            v-model="tableParams.mobile"
            class="input_fuzzy_search input"
            placeholder="手机号"
            size="mini"
            clearable
          />
        </div>
        <div class="tf_item">
          <div class="tag">数量</div>
          <el-input
            v-model="tableParams.size"
            class="input_fuzzy_search input"
            placeholder="数量"
            size="mini"
            clearable
          />
        </div>
      </div>

      <div
        style="
          background: #fff;
          padding: 10px;
          background-color: #fff;
          padding: 10px;
          border-radius: 6px;
          margin: 5px;
          display: flex;
        "
      >
        <div>
          <div class="input_content">
            <div class="tag">城市</div>
            <el-cascader
              v-model="tableParams.region"
              size="mini"
              placeholder="请选择地区"
              class="inp"
              :props="{ multiple: false, checkStrictly: true }"
              :options="city"
              clearable
              filterable
            />
          </div>

          <div class="input_content">
            <div class="tag">芝麻分</div>
            <el-select
              v-model="tableParams.sesame_scores"
              class="inp"
              size="mini"
              placeholder="请选择"
              clearable
            >
              <el-option key="0,600" label="600以下" value="0,600" />
              <el-option key="600,649" label="600-649" value="600,649" />
              <el-option key="650,699" label="650-699" value="650,699" />
              <el-option key="700,max" label="700以上" value="700,max" />
            </el-select>
          </div>

          <div class="input_content">
            <div class="tag">职业</div>
            <el-select
              v-model="tableParams.work"
              class="inp"
              placeholder="请选择"
              size="mini"
              clearable
            >
              <el-option
                key="civil_servant"
                label="公务员"
                value="civil_servant"
              />
              <el-option
                key="public_institution"
                label="事业单位"
                value="public_institution"
              />
              <el-option
                key="private_corporation"
                label="民营"
                value="private_corporation"
              />
              <el-option
                key="state_corporation"
                label="国企"
                value="state_corporation"
              />
            </el-select>
          </div>

          <div class="input_content">
            <div class="tag">信用</div>
            <el-select
              v-model="tableParams.credit_status"
              class="inp"
              placeholder="请选择"
              size="mini"
              clearable
            >
              <el-option key="no_overdue" label="无逾期" value="no_overdue" />
              <el-option
                key="current_overdue"
                label="当前有逾期"
                value="current_overdue"
              />
              <el-option
                key="overdue_cleared"
                label="逾期已结清"
                value="overdue_cleared"
              />
            </el-select>
          </div>

          <div class="input_content">
            <div class="tag">花呗</div>
            <el-select
              v-model="tableParams.huabei_quota"
              class="inp"
              placeholder="请选择"
              size="mini"
              clearable
            >
              <el-option key="no" label="无" value="no" />
              <el-option key="0,5000" label="0-5000" value="0,5000" />
              <el-option key="5000,max" label="5000以上" value="5000,max" />
            </el-select>
          </div>

          <div class="input_content">
            <div class="tag">白条</div>
            <el-select
              v-model="tableParams.baitiao_quota"
              class="inp"
              placeholder="请选择"
              size="mini"
              clearable
            >
              <el-option key="no" label="无" value="no" />
              <el-option key="0,5000" label="0-5000" value="0,5000" />
              <el-option key="5000,max" label="5000以上" value="5000,max" />
            </el-select>
          </div>
        </div>

        <div style="flex: 1">
          <div class="input_content">
            <div class="tag">车</div>
            <el-radio-group v-model="tableParams.car" size="mini">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">有</el-radio-button>
              <el-radio-button label="0">无</el-radio-button>
            </el-radio-group>
          </div>

          <div class="input_content">
            <div class="tag">房</div>

            <el-radio-group v-model="tableParams.house" size="mini">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">有</el-radio-button>
              <el-radio-button label="0">无</el-radio-button>
            </el-radio-group>
          </div>

          <div class="input_content">
            <div class="tag">公积金</div>

            <el-radio-group v-model="tableParams.accumulation_fund" size="mini">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">有</el-radio-button>
              <el-radio-button label="0">无</el-radio-button>
            </el-radio-group>
          </div>

          <div class="input_content">
            <div class="tag">社保</div>

            <el-radio-group v-model="tableParams.social_security" size="mini">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">有</el-radio-button>
              <el-radio-button label="0">无</el-radio-button>
            </el-radio-group>
          </div>

          <div class="input_content">
            <div class="tag">保单</div>

            <el-radio-group v-model="tableParams.insurance" size="mini">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">有</el-radio-button>
              <el-radio-button label="0">无</el-radio-button>
            </el-radio-group>
          </div>

          <div class="input_content">
            <div class="tag">营业执照</div>

            <el-radio-group v-model="tableParams.business_owner" size="mini">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="1">有</el-radio-button>
              <el-radio-button label="0">无</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>

      <div class="table_operate">
        <div>
          <el-button type="info" plain size="mini" @click="loadTableData"
            >1.查询</el-button
          >
          <el-button type="primary" plain size="mini" @click="onStartMatch"
            >2.开始匹配</el-button
          >
          <el-button type="success" plain size="mini" @click="onConfirmtMatch"
            >3.匹配确认</el-button
          >
        </div>
        <div class="tool-self">
          <el-button
            class="btn_export"
            type="info"
            size="mini"
            @click="exportExcelFun()"
            >导出<i class="el-icon-download el-icon--right"
          /></el-button>
        </div>
      </div>

      <div class="table-card">
        <el-table
          id="table_id"
          v-loading="loading.table"
          class="table"
          :data="tableData.data"
          :row-class-name="tableRowClassName"
          :border="true"
          size="mini"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="checkSelection"
          />
          <el-table-column label="产品名称" width="120">
            <template slot-scope="scope">
              <span v-if="'cp' in scope.row">{{
                scope.row.cp.length ? scope.row.cp[0].name : "匹配失败"
              }}</span>
              <span v-else>未匹配</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="age" label="年龄" width="100" />
          <el-table-column label="详情" width="60">
            <template slot-scope="scope">
              <el-link
                class="handle"
                type="warning"
                @click="handleDialogInfo(scope.row)"
                >查看</el-link
              >
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="110" />
          <el-table-column prop="loan_money" label="需求金额" width="90" />
          <el-table-column prop="sesame_score" label="芝麻分" width="90" />
          <el-table-column prop="work" label="职业" width="90" />
          <el-table-column prop="credit_status" label="信用" width="90" />
          <el-table-column prop="huabei_quota" label="花呗额度" width="110" />
          <el-table-column prop="baitiao_quota" label="白条额度" width="90" />
          <el-table-column prop="car" label="车产" width="60" />
          <el-table-column prop="house" label="房产" width="60" />
          <el-table-column prop="accumulation_fund" label="公积金" width="80" />
          <el-table-column prop="social_security" label="社保" width="60" />
          <el-table-column prop="insurance" label="保单" width="60" />
          <el-table-column prop="business_owner" label="营业执照" width="90" />
          <el-table-column
            prop="region"
            label="城市"
            width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span class="ellipsis" style="font-size: 12px">{{
                scope.row.province +
                "-" +
                scope.row.city +
                "-" +
                scope.row.district
              }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="channel_id" label="渠道ID" width="60" />

          <el-table-column label="申请时间" width="140">
            <template slot-scope="scope">
              <div>{{ scope.row.createtime }}</div>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="140" prop="stage" />
        </el-table>

        <!-- <el-pagination
          class="table_pagination"
          :current-page="currentPage"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
        /> -->
      </div>
    </div>
    <ClueDetail ref="clueDetailRef" />
  </div>
</template>

<script>
import {
  apiClueUnmatchList,
  apiClueMatching,
  apiClueSubmit,
} from "@/api/apiCommon";
import { apiCity } from "@/api/apiConfig";
import { exportExcel } from "@/utils/htmlToExcelUtils";
import { initTableData, initPickerOptions } from "@/utils/appUtil";
import { getDateDaysAgo, getStartOfDayTimestamp } from "@/utils/datetimeUtil";
import ClueDetail from "@/components/business/ClueDetail.vue";
export default {
  name: "ClueUnmatch",
  components: {
    ClueDetail,
  },
  data() {
    return {
      tableParams: {
        page: 1,
        size: 5,
        time_interval: [getDateDaysAgo(), new Date()],
        mobile: "",
        region: [],
        sesame_score: "",
        work: "",
        credit_status: "",
        huabei_quota: "",
        baitiao_quota: "",
        car: "all",
        house: "all",
        accumulation_fund: "all",
        social_security: "all",
        insurance: "all",
        business_owner: "all",
      },
      tableData: {},
      tableInfo: {
        status: false,
      },
      multipleSelection: [],
      currentPage: 1,
      dialog_info: {
        status: false,
        data: null,
      },
      pickerOptions: {},
      loading: {
        dialog_create: false,
        table: false,
        form: false,
      },
      config_current: null,
      city: [],
    };
  },
  created() {
    const _this = this;
    _this.pickerOptions = initPickerOptions();
    this.reqApiCity();
    // console.log(city,'city')

    // _this.loadTableData()
  },
  methods: {
    // 导出表格
    exportExcelFun() {
      exportExcel("线索");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    checkSelection(row) {
      if ("cp" in row) {
        if (row.cp.length) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 获取城市
    reqApiCity() {
      const _this = this;
      apiCity({}).then((response) => {
        const result = response.data;
        _this.city = result.city;
      });
    },
    // 列表请求
    loadTableData(is_initpage = true) {
      const _this = this;
      if (is_initpage) {
        _this.tableParams.page = 1;
      }
      _this.tableData = initTableData();
      var tableParamsData = { ..._this.tableParams };

      var start_time = getStartOfDayTimestamp(
        tableParamsData["time_interval"][0]
      );
      var end_time =
        getStartOfDayTimestamp(tableParamsData["time_interval"][1]) + 86400;

      delete tableParamsData["time_interval"];
      tableParamsData["start_time"] = start_time;
      tableParamsData["end_time"] = end_time;

      if (!tableParamsData["mobile"]) {
        delete tableParamsData["mobile"];
      }

      const fields = [
        "region",
        "sesame_score",
        "work",
        "credit_status",
        "huabei_quota",
        "baitiao_quota",
      ];

      fields.forEach((field) => {
        console.log([tableParamsData[field], field], "=====sdfgsdf========");
        if (
          Array.isArray(tableParamsData[field]) &&
          tableParamsData[field].length > 0
        ) {
          tableParamsData[field] = tableParamsData[field].join();
        } else if (tableParamsData[field]) {
        } else {
          delete tableParamsData[field];
        }
      });

      _this.loading.table = true;
      _this.multipleSelection = [];
      apiClueUnmatchList(tableParamsData)
        .then((response) => {
          const result = response;
          var tableData = result.data.datalist;

          _this.tableData = tableData;
        })
        .finally(() => {
          _this.loading.table = false;
        });
    },
    onStartMatch() {
      // console.log('开始匹配', this.tableData.map((item) => { return item.id }).join(','))
      const _this = this;
      if (!_this.tableData.length) {
        return _this.$message({
          message: "当前无线索可匹配",
          type: "warning",
        });
      }
      _this.loading.table = true;
      apiClueMatching({
        clue_ids: _this.tableData
          .map((item) => {
            return item.id;
          })
          .join(","),
      })
        .then((res) => {
          if (res.code === 1) {
            const result = res;
            var tableData = result.data.datalist;
            _this.tableData = tableData;
          }
        })
        .finally(() => {
          _this.loading.table = false;
        });
    },
    onConfirmtMatch() {
      const _this = this;
      if (!_this.multipleSelection.length) {
        return _this.$message({
          message: "请先勾选 可匹配线索",
          type: "warning",
        });
      }
      _this.loading.table = true;
      const clue_ids = _this.multipleSelection.map((item) => {
        return {
          clue_id: item.id,
          cp: item.cp[0].id,
        };
      });
      // console.log('确认匹配', JSON.stringify(clue_ids))
      apiClueSubmit({
        clue_cps: JSON.stringify(clue_ids),
      })
        .then((res) => {
          if (res.code === 1) {
            _this.$message({
              message: "匹配确认成功！",
              type: "success",
            });
            _this.loadTableData();
          }
        })
        .finally(() => {
          _this.loading.table = false;
        });
    },
    // 状态转换
    fuStatusCh(status) {
      if (status === 1) {
        return "有";
      } else {
        return "无";
      }
    },
    // 页面跳转
    handleToGoCreate() {
      this.$router.push({ path: "/product/create", query: { id: 0 } });
    },
    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row["status"] === "stop") {
        return "discard-row";
      }
    },
    // 表格操作
    handleTableEdit(index, row) {
      this.$router.push({ path: "/product/update", query: { id: row.id } });
    },
    // 打开详情
    handleDialogInfo(data) {
      this.$refs.clueDetailRef.onOpenView(data);
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val;
      this.loadTableData(false);
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val;
      this.loadTableData(false);
      // console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss">
.input_content {
  margin-bottom: 16px;

  .tag {
    width: 80px;
    text-align: right;
  }
}
</style>
